<template>
    <h3>当前求和为：{{sum}}</h3>
    <button @click="sum++">点我+1</button>
    <hr>
</template>

<script>
    import {
        ref,
        onBeforeMount,
        onMounted,onBeforeUpdate,onUpdated,
        onBeforeUnmount,
        onUnmounted} from 'vue'
    export default {
        name: 'Demo',
        // setup本身相当于 beforeCreate  和created
        setup(){
            console.log('---setup---')
            //数据
            let sum = ref(0)

            //通过组合式API的形式去使用生命周期钩子(不见得非要用)
            onBeforeMount(()=>{
                console.log('---onBeforeMount  == beforeMount---')
            })
            onMounted(()=>{
                console.log('---onMounted  == Mounted---')
            })
            onBeforeUpdate(()=>{
                console.log('---onBeforeUpdate  == BeforeUpdate---')
            })
            onUpdated(()=>{
                console.log('---onUpdated ==Updated ---')
            })
            onBeforeUnmount(()=>{
                console.log('---onBeforeUnmount  == BeforeUnmount---')
            })
            onUnmounted(()=>{
                console.log('---onUnmounted  == Unmounted ---')
            })

            //返回一个对象（常用）
            return {sum}
        },


        //通过配置项的形式使用生命周期钩子
        // 如果组合式api钩子 和配置项的钩子 同时存在，组合式api的执行优先级高一点★★★★★
        //#region
/*        beforeCreate() {
            console.log('---beforeCreate---')
        },
        created() {
            console.log('---created---')
        },
        beforeMount() {
            console.log('---beforeMount---')
        },
        mounted() {
            console.log('---mounted---')
        },
        beforeUpdate(){
            console.log('---beforeUpdate---')
        },
        updated() {
            console.log('---updated---')
        },
        beforeUnmount() {
            console.log('---beforeUnmount---')
        },
        unmounted() {
            console.log('---unmounted---')
        },*/
        //#endregion
    }
</script>

